<template>
	 
 <view  class="drop-content">
		<view class="drop-content__head">{{headlabel}}</view>
		<view class="drop-content__body">
		<!-- 多选 -->
		<view class="u-flex u-wrap u-p-10" style="flex-wrap: wrap;">
		<view class="u-m-10"
		 v-for="(item,index ) in options" :key="item.value">
			<up-tag :text="item.name"
			:plain="!modelvalue[item.value]"
			 type="primary" :name="item.value"
				@click="checkboxClick">
			</up-tag>
		</view>	
		  </view>
		</view>
 </view>
	 
</template>


<script>
	import { addUnit, addStyle, deepMerge } from '@/uni_modules/uview-plus/libs/function/index.js';
 
	export default{
		name:"sub-mut-item",
		props:{
			reset:{
				type: Boolean,
				default: false,
			},
			items:{
				type: Object,
				default:[],
			},
			width:{
				type: [String, Number] ,
				default: 0,
			},
			height:{
				type: [String, Number] ,
				default: 300,
			},
			headlabel:{
				type:String,
				default: '自定义价格',
			},
			fieldname:{
				type: String,
				default: 'field',
			},
			isradio :{
				type: [String, Number] ,
				default: 0,
			}
		},
	   emits: [ 'changeItem'], 
	   data(){
			return {
				fields:{}, 
				modelvalue:{},
			}
		},
		computed:{
			listStyle() {
				const style = {};
				if (this.width != 0) style.width = addUnit(this.width)
				if (this.height != 0) style.height = addUnit(this.height-50)
				// 如果没有定义列表高度，则默认使用屏幕高度			 
				return deepMerge(style, addStyle(this.customStyle))
			},
			options(){
				 return this.items;
			}
		}, 
		watch:{
			reset(n, o){
				for(var k in this.modelvalue){
					this.modelvalue[k] = false;
				}
				 
			}
		},
		mounted() {
		 
			this.items.forEach( (o, i) =>{
				 this.modelvalue[o.value] = o.checked; 
			})
			 
		},
		methods:{
		 
			checkboxClick (index){
				if(this.isradio) {
					this.items.forEach( (o, i) =>{
						 this.modelvalue[o.value] = false; 
					})
				}			 			 
				this.modelvalue[index] = !this.modelvalue[index];				 
				this.fields[this.fieldname] = this.modelvalue ;				 
				this.$emit('changeItem', this.fields  )
				 
			},
		}
		
	}
</script>

<style lang="scss">
  .drop-content{
    padding: 30rpx;
	padding-bottom: 5rpx; 
  	
  	&__head{ 
  		padding-left: 20rpx;
  	}
   }
 
</style>